import QtQuick 2.10
import QtQuick.Controls.Material 2.3
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

Item{
    id:root
    width:  impWidth
    height: 26-impHeight

    signal moved

    property alias currentValue: control.value
    property real minValue:0
    property real maxValue
    property real stepValue

    property bool isHorizontal:true
    property int sliderWidth:200
    property int sliderHeight:4
    property int indicatorDiameter:26

    property color backColor       :"#bdbebf"
    property color backValidColor  :"#0FE950"
    property color indicatorNormal :"#0000cd"
    property color indicatorPressed:"#ff8c00"

    property int impWidth: control.horizontal? sliderWidth:sliderHeight
    property int impHeight: control.horizontal? sliderHeight:sliderWidth

    Slider {
        id:control
        from: minValue
        value: 1
        to: maxValue
        orientation: isHorizontal ? Qt.Horizontal : Qt.Vertical
        pressed:false
        stepSize:stepValue
        snapMode:Slider.SnapOnRelease

        background: Rectangle{
            x:  control.horizontal?(control.leftPadding):(control.topPadding + control.availableWidth / 2 - width / 2)
            y: control.horizontal?(control.topPadding + control.availableHeight / 2 - height / 2):(control.topPadding)
            implicitWidth: impWidth
            implicitHeight: impHeight
            width: control.horizontal?(control.availableWidth):(sliderWidth)
            height: control.horizontal? (sliderHeight):(control.availableHeight)
            radius: 2
            color: backColor

            Rectangle {
                width: control.horizontal? (control.visualPosition * parent.width) : parent.width
                height: control.horizontal? parent.height : (control.visualPosition * parent.height)
                color: backValidColor
                radius: height/2
            }
        }
        handle: Rectangle {
            x: control.horizontal? (control.leftPadding + control.visualPosition * (control.availableWidth - width))
                         :(control.topPadding + control.availableWidth / 2 - width / 2)
            y: control.horizontal? (control.topPadding + control.availableHeight / 2 - height / 2)
                         :(control.leftPadding + control.visualPosition * (control.availableHeight - height))
            implicitWidth: indicatorDiameter
            implicitHeight: indicatorDiameter
            radius: width/2
            color: control.pressed ? indicatorPressed : indicatorNormal
            border.color: "#fffafa"
        }

        onMoved: {
            emit:root.moved()
        }
    }
}


